<!DOCTYPE html>
<html>
<head>
	<title></title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="../js/touch.js"></script>
</head>
<body>

<img id="img" src="../img/3.jpg" width="200px">

<script type="text/javascript">

$(function() {
     var target = document.getElementById("img");
     target.style.webkitTransition = 'all ease 0.05s';
     touch.on('#img', 'pinchstart', function(ev) {
         ev.preventDefault();
     });
     var initialScale = 1;
     var currentScale;
     touch.on('#img', 'pinchend', function(ev) {
         currentScale = ev.scale - 1;
         currentScale = initialScale + currentScale;
         currentScale = currentScale > 2 ? 2 : currentScale; //自己调节可以放大的最大倍数
         currentScale = currentScale < 0.5 ? 0.5 : currentScale; //自己调节可以缩小的最小倍数
         this.style.webkitTransform = 'scale(' + currentScale + ')';
     });
     touch.on('#img', 'pinchend', function(ev) {
         initialScale = currentScale;
     });
 });

</script>
</body>
</html>